<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab_VS4.aspx.cs" Inherits="Tab_VS4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>jQuery Tools standalone demo</title>

	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	


	
	<!-- tab styling -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/css/tabs.css"/>
	
	
	<style>
	
/* tab pane styling */
.panes div {
	display:none;		
	padding:15px 10px;
	border:1px solid #999;
	border-top:0;
	height:100px;
	font-size:14px;
	background-color:#fff;
}

	
	div.panes div {
		background:#fff url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x 0 5px;
		-background:#fff;
		height:172px;
	}
	
	div.panes label {
		margin-bottom:15px;
		display:block;
	}
	
	label.error {
		color:red;
	}
	</style>
</head>

<body>

<div id="wizard">

	<!-- tabs -->

	<ul class="tabs">
		<li><a href="#" class="w2">Personal info</a></li>
		<li><a href="#" class="w2">Shopping basket</a></li>
		<li><a href="#" class="w2">Review order</a></li>
	</ul>

	<!-- panes -->
	<div class="panes">

		<div>

			<label>
				Username <br />
				<input name="username"/>
			</label>

			<label>
				Email <br />

				<input name="email"/>
			</label>

			<label>
				<input id="terms" type="checkbox" />
				I accept <a href="#">these</a> terms and conditions
			</label>

			<p>

				<button class="next">Next &raquo;</button>
			</p>

		</div>

		<div>
			<h2>An imaginary basket is here...</h2>

			<p>

				<button class="prev">&laquo; Prev</button>
				<button class="next">Next &raquo;</button>
			</p>
		</div>

		<div>
			<h2>An imaginary order is here...</h2>

			<p>
				<button class="prev">&laquo; Prev</button>
			</p>

		</div>
	</div>

</div>

<!-- activate tabs with JavaScript -->
<script>
$(function() {

	

	// get container for the wizard and initialize its exposing
	var wizard = $("#wizard").expose({color: '#789', lazy: true});

	// enable exposing on the wizard
	wizard.click(function() {
		$(this).expose().load();
	});

	

	// enable tabs that are contained within the wizard
	$("ul.tabs", wizard).tabs("div.panes > div", function(event, index) {

		/* now we are inside the onBeforeClick event */

		// ensure that the "terms" checkbox is checked.
		var terms = $("#terms");
		if (index > 0 && !terms.get(0).checked)  {
			terms.parent().addClass("error");

			// when false is returned, the user cannot advance to the next tab
			return false;
		}

		// everything is ok. remove possible red highlight from the terms
		terms.parent().removeClass("error");
	});

	

	// get handle to the tabs API
	var api = $("ul.tabs", wizard).data("tabs");

	// "next tab" button
	$("button.next", wizard).click(function() {
		api.next();
	});

	// "previous tab" button
	$("button.prev", wizard).click(function() {
		api.prev();
	});

});
</script>



</body>

</html>

